<template>
    <div class="map-guiji-tan">
        {{num}}
        <!--<div style="margin-bottom: 10px;" v-if="driverListData.localtion && driverListData.localtion.length > 0">-->
        <!--<div v-if="showButton">-->
        <!--<el-button type="primary" @click="startAnimation">停止播放</el-button>-->
        <!--<el-button type="primary" @click="startAnimation" v-if="!isGuiJi">开始播放</el-button>-->
        <!--<el-button type="primary" @click="pauseAnimation"  v-if="isGuiJi">暂停播放</el-button>-->
        <!--<el-button type="primary" @click="resumeAnimation">继续播放</el-button>-->
        <!--<el-button type="primary" @click="addSpeed">快进</el-button>-->
        <!--<el-button type="primary" @click="reduceSpeed">回退</el-button>-->
        <!--<el-input type="text" readonly style="width: 80px;margin:0 4px 0 10px" v-model="speed"></el-input>km/h-->
        <!--</div>-->

        <!--</div>-->
        <div class="guiji-map" :style="{'height':mapHeight}">
            <div id="guiji-map" class="amap-demo" :style="{'height':mapHeight}"></div>
        </div>
    </div>

</template>
<style lang="less">
    .map-guiji-tan{
        .guiji-map {
            position: relative;
            .amap-simple-marker-label {
                width: 100%;
                color: #000 !important;
                font-size: 12px !important;
                text-align: center !important;
            }
            .amap-simple-marker-def-style .amap-simple-marker-label {
                line-height: 40px !important;
                white-space: nowrap;
            }
        }
        .select-style-map{
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 10000;
        }
    }

</style>
<script>
    import {lazyAMapApiLoaderInstance} from 'vue-amap';
    export default {
        props: {
            driverListData: {
                type: Array,
                default: () => {
                    return []
                }
            },
            driverTask: {
                type: Array,
                default: () => {
                    return []
                }
            },
            driverTaskOver: {
                type: Array,
                default: () => {
                    return []
                }
            },
            markerLocation: {
                type: Array,
                default: () => {
                    // return [116.397428,39.90923]
                    return []
                }
            },
            mapHeight: {
                type: Number | String,
                default: '400px'
            },
            showButton: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                num: 1,
                driverTaskMarker:null,
                driverTaskOverMarker:null,
                driverListDataMarker:null,
                map: null,
                isStart: true,
                infoWindow: null,
                pathSimplifierIns: null,
                PathSimplifier: null,
                driverImg: null,
                isGuiJi: false,
                speed: 1000,
                marker: null,
                mapCenter: [],
                mapOption: {},
                imgurl: require('./imgs/jinji@2x.png'),
                imgurlover: require('./imgs/loding@2x.png'),
                img: require('./imgs/car.png')
            };
        },
        watch: {
            driverListData: function (newval) {
                this.isGuiJi = false;
                this.initmap();
            },
            markerLocation: function (newval) {
                if (newval) {
                    this.setMarkerLocation(newval);
                }

            }
        },
        mounted() {
        },
        methods: {
            setMarkerLocation(val) {
                if (this.marker) {
                    this.marker.setPosition(val);
                    this.map.setCenter(val);
                }
            },
            toTask(id) {
                this.$router.push({path:'/dialog/show/express.mission/' + id});
            },
            initmap() {
                let self = this;
                // console.info('self.driverListData', self.driverTask);
                lazyAMapApiLoaderInstance.load().then(() => {
                    self.mapOption = {
                        center: self.driverListData.length>0?[self.driverListData[0].lon,self.driverListData[0].lat]:JSON.parse(localStorage.getItem('lnglat')),
                        zoom: 12,
                        mapStyle: "amap://styles/whitesmoke"
                    };
                    self.map = new AMap.Map('guiji-map', self.mapOption);
                    if (self.driverTask && self.driverTask.length > 0) {
                            self.driverTask.forEach(item=>{
                                self.driverTaskMarker = new AMap.Marker({
                                    map: self.map,
                                    content: `<img onclick="num = 2" src="${self.imgurl}" style="width: 20px;height: 20px;" alt="">`,
                                    offset: new AMap.Pixel(-10, -10),
                                    position: [item.end_lon,item.end_lat]
                                });
                            });
                    }
                    if (self.driverTaskOver && self.driverTaskOver.length > 0) {
                        self.driverTaskOver.forEach(item=>{
                            self.driverTaskOverMarker = new AMap.Marker({
                                map: self.map,
                                content: `<img onclick="alert(` + item.id + `)" src="` + self.imgurlover + `" style="width: 20px;height: 20px;" alt="">`,
                                offset: new AMap.Pixel(-10, -10),
                                position: [item.end_lon,item.end_lat]
                            });
                        });
                    }
                    if (self.driverListData && self.driverListData.length > 0) {
                        self.driverListData.forEach(item=>{
                            self.driverListDataMarker = new AMap.Marker({
                                map: self.map,
                                content: `<img src="` + self.img + `" style="height: 30px;" alt="">`,
                                offset: new AMap.Pixel(-10, -15),
                                position: [self.driverListData[0].lon,self.driverListData[0].lat]
                            });
                        });
                    }
                    // self.map.add(self.driverTaskMarker);
                    // self.map.add(self.driverTaskOverMarker);
                    // self.map.add(self.driverListDataMarker);
                    // AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => {
                    //     if (self.driverTask && self.driverTask.length > 0) {
                    //         self.driverTask.forEach(item=>{
                    //             new SimpleMarker({
                    //                 iconStyle: {
                    //                     src: self.imgurl,
                    //                     style: {
                    //                         width: '20px',
                    //                         height: '20px'
                    //                     }
                    //                 },
                    //                 offset: new AMap.Pixel(-10, -20),
                    //                 showPositionPoint: true,
                    //                 map: self.map,
                    //                 position: [item.end_lon,item.end_lat]
                    //             });
                    //         });
                    //     }
                    //     if (self.driverTaskOver && self.driverTaskOver.length > 0) {
                    //         self.driverTaskOver.forEach(item=>{
                    //             new SimpleMarker({
                    //                 iconStyle: {
                    //                     src: self.imgurlover,
                    //                     style: {
                    //                         width: '14px',
                    //                         height: '14px'
                    //                     }
                    //                 },
                    //                 offset: new AMap.Pixel(-7, -14),
                    //                 showPositionPoint: true,
                    //                 map: self.map,
                    //                 position: [item.end_lon,item.end_lat]
                    //             });
                    //         });
                    //     }
                    //     if (self.driverListData && self.driverListData.length > 0) {
                    //         new SimpleMarker({
                    //             iconStyle: {
                    //                 src: self.img,
                    //                 style: {
                    //                     width: '30px',
                    //                     height: '30px'
                    //                 }
                    //             },
                    //             offset: new AMap.Pixel(-15, -30),
                    //             showPositionPoint: true,
                    //             map: self.map,
                    //             position: [self.driverListData[0].lon,self.driverListData[0].lat]
                    //         });
                    //     }
                    // });
                    AMapUI.load(['ui/misc/PathSimplifier'], function (PathSimplifier) {

                        if (!PathSimplifier.supportCanvas) {
                            alert('当前环境不支持 Canvas！');
                            return;
                        }
                        self.PathSimplifier = PathSimplifier;
                        let colors = [
                            "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
                            "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
                            "#651067", "#329262", "#5574a6", "#3b3eac"
                        ];
                        let driverTrack = []; //司机轨迹
                        driverTrack = self.driverListData ? self.driverListData : [];

                        if (driverTrack && driverTrack.length > 0) {
                            //按时间排序

                            var points = [];
                            driverTrack.map(function (item) {
                                let point = {};
                                if (item.lon && item.lat) {
                                    point = {
                                        name: item.created_at,
                                        lnglat: [item.lon, item.lat]
                                    };
                                    points.push(point);
                                }
                            })
                        }
                        self.pathSimplifierIns = new self.PathSimplifier({
                            zIndex: 100,
                            autoSetFitView: false,
                            map: self.map, //所属的地图实例

                            getPath: function (pathData, pathIndex) {
                                let points = pathData.points,
                                    lnglatList = [];
                                if (points && points.length > 0) {
                                    for (let i = 0, len = points.length; i < len; i++) {
                                        lnglatList.push(points[i].lnglat);
                                    }
                                }
                                return lnglatList;
                            },
                            getHoverTitle: function (pathData, pathIndex, pointIndex) {
                                if (pointIndex >= 0) {
                                    // return pathData.name + '，时间' + pathData.points[pointIndex].name;
                                    return pathData.points[pointIndex].name;
                                }
                                // return pathData.name + '，时间' + pathData.points.length;
                            },
                            renderOptions: {
                                pathLineStyle: {
                                    dirArrowStyle: true
                                },
                                getPathStyle: function (pathItem, zoom) {

                                    var color = colors[pathItem.pathIndex % colors.length],
                                        lineWidth = Math.round(2 * Math.pow(1.1, zoom - 3));

                                    return {
                                        pathLineStyle: {
                                            strokeStyle: color,
                                            lineWidth: lineWidth
                                        },
                                        pathLineSelectedStyle: {
                                            lineWidth: lineWidth
                                        }
                                    };
                                },
                                renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
                            }
                        });
                        window.pathSimplifierIns = self.pathSimplifierIns;
                        //设置数据
                        // console.info('points',points);
                        self.pathSimplifierIns.setData([{
                            name: self.driverListData.driver,
                            points: points
                        }]);
                    })
                })
            },
            onload() {
                pathSimplifierIns.renderLater();
            },
            onerror(e) {
                alert('图片加载失败！');
            },
            startAnimation() {
                let self = this;
                if (!self.isGuiJi) {
                    console.info('开启');
                    self.driverImg = self.pathSimplifierIns.createPathNavigator(0, {
                        loop: false, //循环播放
                        speed: self.speed, //巡航速度，单位千米/小时
                        pathNavigatorStyle: {
                            width: 40,
                            height: 40,
                            //使用图片
                            content: self.PathSimplifier.Render.Canvas.getImageContent(self.img, self.onload, self.onerror),
                            strokeStyle: null,
                            fillStyle: null,
                            //经过路径的样式
                            pathLinePassedStyle: {
                                lineWidth: 6,
                                strokeStyle: 'black',
                                dirArrowStyle: {
                                    stepSpace: 15,
                                    strokeStyle: 'red'
                                }
                            }
                        }
                    });
                    self.driverImg.marker = new AMap.Marker({
                        offset: new AMap.Pixel(15, -8),
                        content: self.driverListData.driver,
                        map: self.map
                    });
                    self.driverImg.on('move', function () {
                        self.driverImg.marker.setPosition(self.driverImg.getPosition());
                        // self.map.setZoom(15);
                        // self.map.setCenter(self.driverImg.getPosition());
                        // self.map.setCenter(self.driverImg.getPosition());
                    });
                    self.driverImg.start();
                    self.isGuiJi = true;
                } else {
                    console.info('停止');
                    self.driverImg.marker.setMap(null);
                    self.driverImg.destroy();
                    self.map.setCenter([self.driverListData.localtion[0].lon, self.driverListData.localtion[0].lat])
                    self.isGuiJi = false;
                    self.driverImg = null;
                    self.returnBegin();
                }

            },
            pauseAnimation() {
                if (this.isGuiJi) {
                    this.driverImg.pause();
                }
            },
            resumeAnimation() {
                this.driverImg.resume();
            },
            addSpeed() {
                this.speed += 1000;
                if (this.driverImg) {

                    this.driverImg.setSpeed(this.speed)
                }
            },
            reduceSpeed() {
                if (this.speed > 1000) {
                    this.speed -= 1000;
                    if (this.driverImg) {

                        this.driverImg.setSpeed(this.speed)

                    }
                }
            },
            returnBegin() {
                this.map.setCenter([this.driverListData.localtion[0].lon, this.driverListData.localtion[0].lat])
            }
        }
    };
</script>

